<template>
    <div class="t-box">
        <div class="t-nav">
            <img class="c-coin" :src="getImg" />
            <span class="c-nam c-title-4">{{ item?.symbol }}</span>
        </div>
        <div class="t-tab c-title-5">
            <div class="t-item">
                <div class="t-top">Inflow</div>
                <div class="t-botm">
                    <JNumber :num="item?.inTotalUsd" prefix="$"></JNumber>
                </div>
            </div>
            <div class="t-item">
                <div class="t-top">Outflow</div>
                <div class="t-botm">
                    <JNumber :num="item?.outTotalUsd" prefix="$"></JNumber>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import JNumber from "@/components/j-number/index.vue";
import { useTokens } from "@/stores/tokens";
import { computed } from "vue";
const tokens = useTokens();
const props = defineProps({
    item: {
        type: Object as any
    }
});
const getImg = computed(() => {
    return tokens.getImg(props.item?.symbol);
});

</script>

<style lang="less" scoped>
.t-box {
    left: -6px;
    border-radius: 4px;
    padding: 12px;
    background: #24292d;
    z-index: 12;
    pointer-events: none;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    .t-nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 12px;
        .c-coin {
            width: 20px;
            height: 20px;
            object-fit: contain;
            border-radius: 50%;
        }

        .c-nam {
            margin-left: 10px;
            color: #fff;
        }
    }

    .t-tab {
        display: flex;
        gap: 24px;
        color: #b1b6c6;

        .t-top {
            text-wrap: nowrap;
        }
        .t-botm {
            font-size: 14px;
            color: #fff !important;
        }
    }
}

.rigt {
    text-align: right;
}

:deep(.num-txt) {
    font-weight: 300;
}
</style>
